<template>
  <div class="pinia-demo">
    <h2>Pinia 状态管理示例</h2>
    <div class="counter-display">
      <h3>计数器状态</h3>
      <p>当前计数：{{ counterStore.count }}</p>
      <p>双倍计数：{{ counterStore.doubleCount }}</p>
    </div>

    <div class="counter-actions">
      <button @click="counterStore.increment">增加</button>
      <button @click="counterStore.decrement">减少</button>
      <button @click="counterStore.reset">重置</button>
    </div>

    <div class="counter-history">
      <h3>历史记录</h3>
      <ul>
        <li 
          v-for="(value, index) in counterStore.history" 
          :key="index"
        >
          {{ value }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '../../stores/counterStore'

// 创建 store 实例
const counterStore = useCounterStore()
</script>

<style scoped>
.pinia-demo {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
.counter-display, .counter-actions, .counter-history {
  margin: 15px 0;
}
button {
  margin: 0 5px;
  padding: 5px 10px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background-color: #e0e0e0;
  margin: 5px 0;
  padding: 5px;
  border-radius: 4px;
}
</style>
